<template>
	<view class="other">
		<view class="other-top">
			<view class="banner"></view>
			<!-- 子分类 -->
			<view class="block1">
				<view class="block1-item" v-for="(item,i) in classifyList" :key="item.classifyId" v-if="i<=2">
					<image :src="item.classifyPicture" mode=""></image>
					<text>{{item.classifyName}}</text>
				</view>
			</view>
		</view>
		
		<view class="other-list">
			<view class="list-title">当季热卖</view>
			<Product v-for="(item, i) in productList" :key="i" :data="item"></Product>
		</view>
	</view>
</template>

<script>
	import Product from '../../../components/product.vue'
	import Api from '../../../util/api.js'
	export default {
		components:{
			Product
		},
		props: ['classifyId'],
		data() {
			return {
				classifyList:[],
				productList:[],
			};
		},
		watch: {
			classifyId(newValue, oldValue) {
				if(newValue != ''){
					this.initClassifyData();
					this.initProductData();
				}
			}
		},
		methods: {
			initClassifyData(){
				Api.fetchPost('/fsbus/D3003',{parentId: this.classifyId}).then(res=>{
					if(res.errorNo == 0){
						this.classifyList = res.results.data;
					}
				}).then(err=>{
					
				})
			},
			initProductData(){
				Api.fetchPost('/fsbus/M2101',{classifyId: this.classifyId}).then(res=>{
					if(res.errorNo == 0){
						this.productList = res.results.data.list;
					}
				}).then(err=>{
					
				})
			},
		},
	}
</script>

<style>
.other {
	background-color: #f3f3f3;
	width: 100%;
	min-height: 100%;
	position: absolute;
}
.other-top {
	width: 100%;
	padding: 0 30upx;
	background-color:#fff;
}
.other .banner {
	width: 100%;
	height: 260upx;
	background-color: #B0B0B0;
	border-radius: 6upx;
}
.other .block1 {
	display: flex;
	margin-top: 20upx;
}
.other .block1-item {
	max-width: 33.33%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200upx;
}
.other .block1-item image {
	width: 108upx;
	height: 108upx;
	background-color: #E6E6E6;
	border-radius: 100%;
}
.other .block1-item  text {
	color: #4C4C4C;
	margin-top: 10upx;
}
.other-list {
	padding: 0 20upx;
}
.list-title {
	height: 80upx;
	line-height: 80upx;
	width: 100%;
	text-align: center;
}
</style>
